<template>
  <view class="my-tabs flex flex-item-center flex-1 flex-justify-between">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="my-tabs-item flex flex-item-center flex-shrink"
      :style="{
        color: currentIndex === index ? '#c94117' : '#999999',
        fontWeight: currentIndex === index ? 'bold' : 'normal',
        transform: currentIndex === index ? 'scale(1.05)' : 'scale(1)',
      }"
      @click="handleClickTab(item, index)"
    >
      <view>{{ item.name }} </view>
      <view style="font-size: 22rpx; padding: 0 8rpx">
        {{ item.disabled ? "" : item.status ? "↑" : "↓" }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
    // 选中样式
    activeStyle: {
      type: Object,
      default: {
        color: "#c94117",
        fontWeight: "bold",
        transform: "scale(1.05)",
      },
    },
    // 非选中样式`
    inactiveStyle: {
      type: Object,
      default: {
        color: "#606266",
        transform: "scale(1)",
      },
    },
    //item排列方式
    range: {
      type: String,
      default: "justify",
    },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  methods: {
    handleClickTab(data, index) {
      // 重置数据源
      let newList = this.list.map((item, newIndex) => {
        if (newIndex === index) {
          return item;
        } else {
          item.status = true;
          return item;
        }
      });
      this.$emit("initList", [...newList]);
      // 点击的是同一个分类 切换升降排序
      if (index === this.currentIndex) {
        this.list[index].status = !this.list[index].status;
      }
      this.currentIndex = index;
      this.$emit("change", { data, index });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-tabs {
  width: 100%;

  &-item {
    padding: 20rpx;
  }
}
</style>
